<template>
  <div>
    <a-layout>
      <a-layout-sider
        breakpoint="lg"
        :collapsed-width="0"
        v-model:collapsed="collapse"
        :trigger="null"
        collapsible
        @collapse="onCollapse"
        :style="{
          overflow: 'auto',
          height: '94vh',
          left: 0,
          background: '#fff',
        }"
      >
        <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          @click="menuChage"
        >
          <a-menu-item key="schedule">
            <iconpark-icon name="schedule"></iconpark-icon>
            日程
          </a-menu-item>
          <a-menu-item key="task">
            <iconpark-icon name="task"></iconpark-icon>
            任务
          </a-menu-item>
          <a-menu-item key="demand">
            <iconpark-icon name="demand"></iconpark-icon>
            需求
          </a-menu-item>
          <a-sub-menu key="report">
            <template #title>
              <iconpark-icon name="report"></iconpark-icon>
              汇报
            </template>
            <a-menu-item key="daylyNewspaper">
              <iconpark-icon name="DaylyNewspaper"></iconpark-icon>
              日报
            </a-menu-item>
            <a-menu-item key="weeklyNewspaper">
              <iconpark-icon name="WeeklyNewspaper"></iconpark-icon>
              周报
            </a-menu-item>
            <a-menu-item key="monthlyReport">
              <iconpark-icon name="MonthlyReport"></iconpark-icon>
              月报
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px; margin: 16px 5px">
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '0px 10px',
            margin: 0,
            minHeight: '85vh',
          }"
        >
          <div class="float">
            <a-button
              v-if="showCollapsedBtn"
              type="primary"
              shape="circle"
              size="small"
              @click="coll(collapse)"
            >
              <template #icon>
                <menu-unfold-outlined v-if="collapse" class="trigger" />
                <menu-fold-outlined v-else class="trigger" />
              </template>
            </a-button>
          </div>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const selectedKeys = ref(["schedule"]);
    const collapse = ref(false);
    const showCollapsedBtn = ref(false);
    function routerRedirect() {
      const workMenu = localStorage.getItem("workMenu");
      if (workMenu != null) {
        selectedKeys.value[0] = workMenu;
        proxy.$router.push({ name: workMenu });
      } else return;
    }
    onMounted(() => {
      routerRedirect();
    });
    const coll = (e) => {
      collapse.value = !e;
    };
    const onCollapse = (e) => {
      showCollapsedBtn.value = e;
    };
    const menuChage = ({ key }) => {
      proxy.$router.push({ name: key });
      localStorage.setItem("workMenu", key);
    };

    return {
      collapse,
      showCollapsedBtn,
      selectedKeys,
      openKeys: ref(["report"]),
      coll,
      onCollapse,
      menuChage,
    };
  },
  components: { MenuUnfoldOutlined, MenuFoldOutlined },
});
</script>

<style lang="scss" scoped>
.float {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
</style>
